<template>
  <div>
    <!-- <div style="display: flex; padding: 10px">
      <div style="margin-right: 10px">
        <el-switch v-model="horizontal" />
        横向
      </div>
      <div style="margin-right: 10px">
        <el-switch v-model="collapsable" />
        可收起
      </div>
      <div style="margin-right: 10px">
        <el-switch v-model="disaled" />
        禁止编辑
      </div>
      <div style="margin-right: 10px">
        <el-switch v-model="onlyOneNode" />
        仅拖动当前节点
      </div>
      <div style="margin-right: 10px">
        <el-switch v-model="cloneNodeDrag" />
        拖动节点副本
      </div>
    </div> -->
    <!-- <div style="padding: 0 10px 10px">
      背景色：
      <el-color-picker v-model="style.background" size="small" />
      &nbsp; 文字颜色：
      <el-color-picker v-model="style.color" size="small" />
      &nbsp;
    </div> -->
    <div style="height: 400px">
      <vue3-tree-org
        :data="dataMsg"
        center
        :horizontal="horizontal"
        :collapsable="collapsable"
        :label-style="style"
        :only-one-node="onlyOneNode"
        :clone-node-drag="cloneNodeDrag"
        :before-drag-end="beforeDragEnd"
        :default-expand-keys="[1, 2, 3, 4, 5, 6, 7, 8, 9, 10]"
        @on-node-drag="nodeDragMove"
        @on-node-drag-end="nodeDragEnd"
        @on-contextmenu="onMenus"
        @on-expand="onExpand"
        @on-node-dblclick="onNodeDblclick"
        @on-node-click="onNodeClick"
      />
      <!-- :expanded-keys="expandedKeys" -->
    </div>
  </div>
</template>

<script>
  // import { ElSwitch, ElColorPicker, ElMessage } from 'element-plus'

  export default defineComponent({
    name: 'TreeOrg',
    // components: { ElSwitch, ElColorPicker },
    emits: ['fetch-data'],
    setup() {
      const state = reactive({
        dataMsg: {
          id: 1,
          label: '三金集团',
          style: { color: '#fff', background: '#108ffe' },
          children: [
            {
              id: 2,
              pid: 1,
              label: '集团总部',
              disabled: true,
              noDragging: true,
              children: [
                {
                  id: 5,
                  pid: 2,
                  label: '集团本部',
                  disabled: true,
                  noDragging: true,
                  children: [
                    {
                      id: 10,
                      pid: 2,
                      label: '企业发展部',
                      disabled: true,
                      noDragging: true,
                    },
                    {
                      id: 11,
                      pid: 2,
                      label: '数据中心',
                      disabled: true,
                      noDragging: true,
                    },
                    {
                      id: 12,
                      pid: 2,
                      label: '财务部',
                      disabled: true,
                      noDragging: true,
                    },
                    {
                      id: 13,
                      pid: 2,
                      label: '审计部',
                      disabled: true,
                      noDragging: true,
                    },
                  ],
                },
              ],
            },
            {
              id: 3,
              pid: 1,
              label: '增值项目总部',
              children: [
                { id: 6, pid: 3, label: '增值项目总部' },
                { id: 7, pid: 3, label: '保定三剑客' },
                { id: 8, pid: 3, label: '沧州三剑客' },
                { id: 9, pid: 3, label: '廊坊三剑客' },
              ],
            },
            { id: 4, pid: 1, label: '诚信通项目总部' },
          ],
        },
        horizontal: false,
        collapsable: true,
        onlyOneNode: false,
        expandAll: true,
        disaled: false,
        cloneNodeDrag: true,
        style: {
          background: '#fff',
          color: '#5e6d82',
        },
      })

      const onMenus = (node, command) => {
        console.log(node, command)
      }
      const onExpand = (e, data) => {
        console.log(e, data)
      }
      const onExpandAll = (b) => {
        console.log(b)
      }
      const nodeDragMove = (data) => {
        console.log(data)
      }
      const beforeDragEnd = (node, targetNode) => {
        return new Promise((resolve, reject) => {
          if (!targetNode) reject()
          if (node.id === targetNode.id) {
            reject()
          } else {
            resolve()
          }
        })
      }
      const nodeDragEnd = (data, isSelf) => {
        console.log(data, isSelf)
      }
      const onNodeDblclick = () => {
        console.log('onNodeDblclick')
      }
      const onNodeClick = (e, data) => {
        ElMessage.info(data.label)
      }
      const expandChange = () => {
        // this.toggleExpand(this.data, this.expandAll);
      }
      const toggleExpand = (data, val) => {
        if (Array.isArray(data)) {
          data.forEach((item) => {
            item.expand = val
            if (item.children) {
              this.toggleExpand(item.children, val)
            }
          })
        } else {
          data.expand = val
          if (data.children) {
            toggleExpand(data.children, val)
          }
        }
      }

      // 获取所有节点的id组成的数组
      // const getAllKeys = (nodes) => {
      //   const keys = nodes.map(node => node.id);
      //   const allChildrenKeys = nodes.flatMap(node =>
      //     node.children ? getAllKeys(node.children) : []
      //   );
      //   return [...keys, ...allChildrenKeys];
      // };

      // 默认展开所有节点
      // const expandedKeys = ref(getAllKeys(treeData.value));

      return {
        ...toRefs(state),
        onMenus,
        onExpand,
        onExpandAll,
        nodeDragMove,
        beforeDragEnd,
        nodeDragEnd,
        onNodeDblclick,
        onNodeClick,
        expandChange,
        toggleExpand,
        // getAllKeys,
        // expandedKeys
      }
    },
  })
</script>
